<script setup>
import { inject, ref } from "vue";
// import stepsview from "../components/steps/steps.vue";
import { useCounterStore } from "@/stores/upgrade";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { mycard, history, cardshare } from "@/services/user";
import canvashbtwo from "@/pages/mycard/components/canvashbtwo.vue";
// import imagess from "@/static/my/card-icon.png";

//海报参数
//画布组件参数
/**
 * 海报背景图片
 * url--图片地址
 * l---距离画布左边
 * t---距离画布顶部
 * w---图片宽
 * h---图片高
 * */
const bgimg = ref({
  url: "https://lmt-app-cloud.yibaitao.com/20240528/ca0c736d-e1c7-3174-90d4-6d5c02213105.png",
  w: 150,
  h: 150,
  l: 20,
  t: 20,
});

/**
 * 二维码图片
 * url--图片地址
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * w---number---图片宽
 * h---number---图片高
 * */
const codeimg = ref({
  url: "https://lmt-app-cloud.yibaitao.com/20240604/86ed26a6-61e3-4ef3-60dd-95099af50a85.png",
  w: 500,
  h: 500,
  l: 125,
  t: 240,
});
/**
 * logon图片
 * url--string--图片地址
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * w---number---图片宽
 * h---number---图片高
 * */
const logo = ref({
  url: "https://m-cloud.yibaitao.com/8a/7bc1085d47abd6d8bcfdd76b7c3e37.png",
  l: 600,
  t: 40,
  w: 90,
  h: 90,
});
// const logo1 = ref({
//   url: "../../../static/login/shareicon.png",
//   l: 600,
//   t: 40,
//   w: 90,
//   h: 60,
// });
// const logo2 = ref({
//   url: "../../../static/login/shareicon.png",
//   l: 600,
//   t: 40,
//   w: 90,
//   h: 60,
// });

/**
 *海报标题
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
// const titlename = ref({
//   name: "我是标题哦",
//   l: 20,
//   t: 880,
//   size: 34,
//   color: "black",
// });

/**
 *金额数量
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const money = ref({
  name: "10000",
  l: 60,
  t: 1004,
  size: 54,
  color: "#B63434",
});
/**
 *备用说明
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const logoname = ref({
  name: "",
  l: 200,
  t: 75,
  size: 34,
  color: "black",
});
/**
 *备用说明
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const dec = ref({
  name: "",
  l: 200,
  t: 125,
  size: 30,
  color: "#666666",
});
/**
 *备用说明
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
// const btneme = ref({
//   name: "默认",
//   l: 20,
//   t: 955,
//   size: 30,
//   color: "#666666",
// });

const showshare = ref(false);
const cloeshbfun = () => {
  showshare.value = false;
};

const sharefun = async () => {
  let res = await cardshare({ card_id: cardobj.value.card_id });
  if (res.code == 200) {
    logoname.value.name = res.data.real_name;
    codeimg.value.url = res.data.qrcode;
    bgimg.value.url = res.data.head;
    dec.value.name = res.data.title;
  }
  showshare.value = true;
};

const type = ref("");
const cardobj = ref({});
const referrer_id = ref("");
const contentlist = ref([]);
const historylist = ref([]);
const card_id = ref("");
const isshuj = ref(true);
const pages = ref({
  page: 1,
  limit: 10,
  referrer_id: 0,
});

onLoad((e) => {
  // type.value = e.type ? e.type : 1;
  referrer_id.value = e.referrer_id ? e.referrer_id : 0;
  card_id.value = e.card_id ? e.card_id : "";
});
onShow(() => {
  isshuj.value = true;
  mycardfun();
});

async function mycardfun() {
  let res = await mycard({
    card_id: card_id.value,
    // referrer_id: referrer_id.value ? referrer_id.value : 0,
  });
  if (res.code == 200) {
    if (res.data.length <= 0) {
      type.value = 1;
    } else {
      type.value = 2;

      cardobj.value = res.data;
      pages.value.page = 1;
      historylist.value = [];
      contentlist.value = res.data.content.split(",");
      historyfun();
    }
  }
}

async function historyfun() {
  let res = await history(pages.value);
  if (res.code == 200) {
    historylist.value = historylist.value.concat(res.data.list);

    if (res.data.list < pages.value.limit) {
      isshuj.value = false;
    }
  }
  // historylist.value = [];
}

const ceartempfun = () => {
  uni.navigateTo({
    url: "/pages/mycard/cardcreate/index",
  });
};

const sharecard = () => {
  uni.navigateTo({
    url: "/pages/mycard/cardmp/index?card_id=" + cardobj.value.card_id,
  });
};
const videoErrorCallback = (e) => {
  // uni.showModal({
  //   content: e.target.errMsg,
  //   showCancel: false,
  // });
};
const seemord = () => {
  if (!isshuj.value) {
    return;
  }
  pages.value.page++;
  historyfun();
};

const phonetall = (value) => {
  uni.makePhoneCall({
    phoneNumber: value,
  });
};

const copyfun = (value) => {
  if (!value) {
    uni.showToast({
      title: "未填写微信号,无法复制",
      icon: "none",
    });
    return;
  }
  uni.setClipboardData({
    data: value,
    success: function () {
      uni.showToast({
        title: "微信号已复制到黏贴板",
        icon: "none",
      });
    },
  });
};

// 定义 changeTitle 方法
const isshow = ref(false);
const changeTitle = () => {
  isshow.value = !isshow.value;
};
</script>

<template>
  <view class="upgrade">
    <view class="mycard" v-if="type == 1">
      <view class="no-mycard">
        <image src="@/static/nodate/datas.png" mode="widthFix" />
      </view>
      <view class="text">您还未创建名片~</view>

      <view class="cearte">
        <view class="btn" @click="ceartempfun">
          <up-icon name="plus" color="#FFFFFF" size="32rpx"></up-icon>
          <text>创建名片</text>
        </view>
      </view>
    </view>

    <view class="mycard-info" v-if="type == 2">
      <view class="info-bg">
        <image
          v-if="cardobj.back_img"
          :src="cardobj.back_img"
          mode="widthFix"
        />
        <image
          v-if="!cardobj.back_img"
          src="@/pages/mycard/static/card-bg.png"
          mode="widthFix"
        />
      </view>
      <view class="mycard-info_box">
        <view class="card_info">
          <view class="card_info_box">
            <view class="card_info_top">
              <view class="card_info_top_left">
                <view class="card_info_top_img">
                  <image :src="cardobj.head" mode="aspectFill" shape="circle" />
                </view>
                <view class="card_info_top_text">
                  <text>{{ cardobj.real_name || "---" }}</text>
                  <text>{{ cardobj.title || "---" }}</text>
                </view>
              </view>
              <view class="card_info_top_right">
                <image
                  src="@/pages/mycard/static/card-icon.png"
                  mode="widthFix"
                />
              </view>
            </view>

            <view class="card_info_middle">
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/home-icon.png"
                  mode="widthFix"
                />
                <text>{{ cardobj.company || "---" }}</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/phone-icon.png"
                  mode="widthFix"
                />
                <text>{{ cardobj.mobile || "---" }}</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/weixin-icon.png"
                  mode="widthFix"
                />
                <text>{{ cardobj.wechat || "---" }}</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/address-icon.png"
                  mode="widthFix"
                />
                <text class="address_text">{{ cardobj.address || "---" }}</text>
                <!-- <text class="address_click">(点击地址导航)</text> -->
              </view>
            </view>

            <view class="card_info_btn" @click="sharecard">
              <text>分享名片</text>
            </view>

            <view class="card_info_footer">
              <view>
                <view class="card_info_footer-title" @click="changeTitle">
                  {{ isshow ? "收缩全部名片" : "展开全部名片" }}
                  <up-icon :name="isshow ? 'arrow-up' : 'arrow-down'"></up-icon>
                </view>
              </view>
              <view v-if="isshow">
                <view class="card_info_middle">
                  <view class="card_info_middle_list">
                    <view class="middle_list_left">
                      <image
                        src="@/pages/mycard/static/icon-1.png"
                        mode="widthFix"
                      />
                      <text>邮箱</text>
                    </view>
                    <text class="middle_list_right">{{
                      cardobj.email || "---"
                    }}</text>
                  </view>
                  <view class="card_info_middle_list">
                    <view class="middle_list_left">
                      <image
                        src="@/pages/mycard/static/icon-2.png"
                        mode="widthFix"
                      />
                      <text>座机</text></view
                    >

                    <text class="middle_list_right">{{
                      cardobj.telphone || "---"
                    }}</text>
                  </view>
                  <view class="card_info_middle_list">
                    <view class="middle_list_left">
                      <image
                        src="@/pages/mycard/static/icon-3.png"
                        mode="widthFix"
                      />
                      <text>我的标签</text>
                    </view>
                    <text class="middle_list_right">
                      <text
                        class="middle_list_right_text"
                        v-for="(item, index) in cardobj.label"
                        :key="index"
                        >{{ item }}</text
                      >
                    </text>
                  </view>
                  <view class="card_info_middle_list">
                    <view class="middle_list_left">
                      <image
                        src="@/pages/mycard/static/icon-4.png"
                        mode="widthFix"
                      />
                      <text class="address_text1">个性签名</text>
                    </view>
                    <text class="middle_list_right">{{
                      cardobj.signature || "---"
                    }}</text>
                  </view>
                </view>
              </view>
              <!-- <u-collapse @change="change" @close="close" @open="open">
                <u-collapse-item :title="changeTitle" name="Docs guide">
                  
                </u-collapse-item>
              </u-collapse> -->
            </view>
          </view>
        </view>

        <view class="card-item">
          <view class="card-item-list" v-if="!referrer_id" @click="ceartempfun">
            <image src="@/pages/mycard/static/card-img.png" mode="widthFix" />
            <text>编辑名片</text>
          </view>
          <view class="card-item-list" @click="phonetall(cardobj.mobile)">
            <image src="@/pages/mycard/static/phone-img.png" mode="widthFix" />
            <text>打电话</text>
          </view>
          <view class="card-item-list" @click="copyfun(cardobj.wechat)">
            <image src="@/pages/mycard/static/weixin-img.png" mode="widthFix" />
            <text>加微信</text>
          </view>
          <view class="card-item-list" @click="sharefun">
            <image src="@/pages/mycard/static/card-save.png" mode="widthFix" />
            <text>保存名片</text>
          </view>
        </view>

        <view class="mycard_data" v-if="!referrer_id || referrer_id == 0">
          <text class="mycard_data_title">名片数据</text>
          <view class="mycard_data_box">
            <view class="mycard_data_box_item">
              <text class="box-item-num">{{ cardobj.today_num }}</text>
              <text class="box-item-title">今日次访问量(次)</text>
            </view>
            <view class="mycard_data_box_item">
              <text class="box-item-num">{{ cardobj.visit_num }}</text>
              <text class="box-item-title">累计次访问量(次)</text>
            </view>
            <view class="mycard_data_box_item">
              <text class="box-item-num">{{ cardobj.share_num }}</text>
              <text class="box-item-title">分享数(次)</text>
            </view>
          </view>

          <u-line length="90%" color="#E6E6E6" margin="30rpx"></u-line>

          <view class="mycard_data_visitor" v-if="historylist.length > 0">
            <text class="visitor_title">最近访客</text>
            <view class="visitor_list">
              <view
                class="visitor_list_item"
                v-for="(item, index) in historylist"
                :key="index"
              >
                <text>{{ item.phone || "---" }}</text>
                <text>{{ item.create_time || "---" }}</text>
              </view>
            </view>

            <!-- <view class="card_info_footer">
              <u-collapse @change="change" @close="close" @open="open">
                <u-collapse-item title="展开全部名片" name="Docs guide">
                  <text class="u-collapse-content"
                    >涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text
                  >
                </u-collapse-item>
              </u-collapse>
            </view> -->
          </view>
        </view>
        <view class="index-see" v-if="historylist.length > 0">
          <text @click="seemord"
            >{{ isshuj ? "点击查看更多" : "已加载完" }}
          </text>
        </view>

        <view class="mycard_player" v-if="cardobj.video_intro">
          <!-- {{ cardobj.video_cover }} -->
          <!-- enable-danmu
            danmu-btn
            controls
            :poster="cardobj.video_cover" -->
          <video
            v-if="cardobj.video_intro"
            id="myVideo"
            :src="cardobj.video_intro"
            @error="videoErrorCallback"
            controls
            :poster="cardobj.video_cover"
            objectFit="cover"
          ></video>

          <!-- <view class="mycard_player_bg"
            ><image src="../static/card-bg.png" mode="aspectFill"
          /></view> -->
          <!-- <view class="mycard_player_click"
            ><image src="../static/player-img.png" mode="widthFix" />
          </view> -->
        </view>

        <view class="mycard_footer">
          <view class="mycard_footer_title">
            <text class="title-top">膳友会</text>
            <text class="title-footer">开启健康生活新篇章</text>
          </view>
          <view class="mycard_footer_img">
            <image
              v-for="(item, index) in contentlist"
              :key="index"
              :src="item"
              mode="widthFix"
            />
          </view>
          <view class="mycard_footer_item">
            <text class="mycard_footer_item-title"> 关于我们关于我们 </text>
            <text class="mycard_footer_item_list">· 开启健康生活新篇章 </text>
          </view>
        </view>
      </view>
    </view>

    <view class="mycard-info" v-if="type == 3">
      <view class="info-bg">
        <image src="@/pages/mycard/static/card-bg.png" mode="widthFix" />
      </view>
      <view class="mycard-info_box">
        <view class="card_info">
          <view class="card_info_box">
            <view class="card_info_top">
              <view class="card_info_top_left">
                <view class="card_info_top_img">
                  <image
                    src="@/static/team/shopkeeper/user-img.png"
                    mode="aspectFill"
                    shape="circle"
                  />
                </view>
                <view class="card_info_top_text">
                  <text>蓝小平</text>
                  <text>膳友会推广大使</text>
                </view>
              </view>
              <view class="card_info_top_right">
                <image
                  src="@/pages/mycard/static/card-icon.png"
                  mode="widthFix"
                />
              </view>
            </view>

            <view class="card_info_middle">
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/home-icon.png"
                  mode="widthFix"
                />
                <text>膳友会中草药灸创业平台</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/phone-icon.png"
                  mode="widthFix"
                />
                <text>13800138000</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/weixin-icon.png"
                  mode="widthFix"
                />
                <text>fengxiaoxiao0123</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/address-icon.png"
                  mode="widthFix"
                />
                <text class="address_text"
                  >广东省广州市番禺区秋天路12栋12号001室</text
                >
                <text class="address_click">(点击地址导航)</text>
              </view>
            </view>

            <view class="qr_code">
              <view class="qr_code_img"></view>
              <text>识别二维码，查看名片</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="mycard-info" v-if="type == 4">
      <view class="mycard-info_box">
        <view class="card_info">
          <view class="card_info_box">
            <view class="card_info_top">
              <view class="card_info_top_left">
                <view class="card_info_top_img">
                  <image
                    src="@/static/team/shopkeeper/user-img.png"
                    mode="aspectFill"
                    shape="circle"
                  />
                </view>
                <view class="card_info_top_text">
                  <text>蓝小平</text>
                  <text>膳友会推广大使</text>
                </view>
              </view>
              <view class="card_info_top_right">
                <image
                  src="@/pages/mycard/static/card-icon.png"
                  mode="widthFix"
                />
              </view>
            </view>

            <view class="card_info_middle">
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/home-icon.png"
                  mode="widthFix"
                />
                <text>膳友会中草药灸创业平台</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/phone-icon.png"
                  mode="widthFix"
                />
                <text>13800138000</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/weixin-icon.png"
                  mode="widthFix"
                />
                <text>fengxiaoxiao0123</text>
              </view>
              <view class="card_info_middle_list">
                <image
                  src="@/pages/mycard/static/address-icon.png"
                  mode="widthFix"
                />
                <text class="address_text"
                  >广东省广州市番禺区秋天路12栋12号001室</text
                >
                <text class="address_click">(点击地址导航)</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <canvashbtwo
      v-if="showshare"
      @cloes-Event="cloeshbfun"
      :bgimg="bgimg"
      :codeimg="codeimg"
      :titlename="titlename"
      :logoname="logoname"
      :logo="logo"
      :dec="dec"
      :btneme="btneme"
      :showbt="false"
      :cw="750"
      :ch="950"
    ></canvashbtwo>
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
